<template>
	<view class="content">
		<template>
			<u-popup :show="show.isShow" :round="10" mode="bottom" @close="close" @open="open" :closeable="true">
				<view class="popup" @touch.prevent>
					<view class="good">
						<view class="good-li">
							<view class="good-img">
								<image :src="list.goodImg"></image>
							</view>
							<view class="text">
								<view>￥{{price*value}}</view>
								<view>{{choose}} 
									<label v-show="choose=='已选'?true:false">{{val}},{{value}}个</label>
								</view>
							</view>
						</view>
						<view class="type">
							<text>规格</text>
							<scroll-view :scroll-y="true" @scrolltolower="lower" lower-threshold="20" :show-scrollbar="false">
								<view class="btn" @touch.stop>
									<view v-for="item in list.goodquaList">
										<u-button :class="val==item.val?'klf':''" @click="Val(item)" :hairline="true" :disabled="item.issock" shape="circle"><text v-if="item.issock==true">缺货</text>{{item.val}}</u-button>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="num">
							<text>数量</text>
							<template>
								<u-number-box v-model="value" :disabled="val.trim()==''?true:false" @change="valChange"></u-number-box>
							</template>
						</view>
					</view>
					<view class="qr">
						<u-button @click="add" type="error" shape="circle">确认</u-button>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
import { mapActions,mapState } from 'vuex'
	export default {
		props : {
			list : {
				type : Object,
				default(){
					return {}
				}
			},
			show : {
				type : Object,
				default(){
					return {}
				}
			}
		},
		onLoad() {
			console.log(this.list);
		},
		data() {
			return {
				value:1		,// 下单数量的值
				val:'',
				price:0,
				choose : '未选',
				isshow : false,
			};
		},
		watch:{
			show(e){
				// this.isshow =e.isShow;
				console.log(e);
			}
		},
		methods:{
			open() {
				this.show.isShow = true;
			    // console.log('open');
			},
			close() {
			    this.show.isShow = false;
			    // console.log('close');
			},
			Val(e){
				this.val=e.val;
				this.choose ='已选';
				this.list.goodquaList.forEach((item)=>{
					if(item.id == e.id){
						this.val =item.val;
						this.price =e.price;
					}
					if(item.price == 0){
						this.price =this.list.goodPrice;
					}
				})
			},
			// 确认下单
			add(){
				if(this.val!=''){
					console.log(this.value);
					this.show.isShow =false;
					console.log(this.show.isShow);
					this.$emit("k",{val:this.val,num:this.value,show:this.show.isShow})
				}else{
					this.show.isShow =false;
					console.log(this.val);
				}
				this.val ='';
			},
			// 计算下单数量
			valChange(e){
				this.value =e.value;
				console.log('当前值为: ' + e.value)
			},
		},
		mounted() {
			console.log(this.list);
			console.log(this.show);
		}
	}
</script>

<style lang="scss">
.content{
    width: 100%;
	padding: 0;
	margin: 0;
}
.popup{
    width: 100%;
    height: 440px;
	padding: 0;
	margin: 0;
    border-radius: 10px;
    .good{
        width: 94%;
        margin: 10px auto;
		padding-bottom: 10px;
        .good-li{
            width: 100%;
            display: flex;
            align-items: center;
            .good-img{
                width: 30%;
                height: 100px;
                border: 1px solid #ddd;
                image{
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                width: 65%;
                margin: 0 auto;
                margin-top: 20px;
                view:nth-child(1){
                    color: red;
                    font-size: 18px;
                    margin: 10px auto;
                }
                view:nth-child(2){
                    font-size: 14px;
                    color: #909399;
                }
                view:nth-child(2) label{
                    color: black;
                    margin-left: 10px;
                }
            }
        }
        .type{
            width: 100%;
            margin: 20px auto;
			text{
				font-size: 18px;
				font-weight: bold;
			}
            .btn{
                width: 100%;
                height: 150px;
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;
                overflow: scroll;
                view{
					margin: 5px;
					.u-button{
					    width: 100%;
					    height: 32px;
					    line-height: 32px;
					    color: #8b8b8b;
					    overflow: hidden;
					    // text-overflow: ellipsis;
					    white-space: nowrap;
					    background-color: #e7e7e7;
					    text{
					        width: 30px;
					        height: 18px;
					        line-height: 18px;
					        font-size: 12px;
					        color: #f8f8f8;
					        background-color: #848484;
					        border-radius: 30%;
					        margin-right: 2px;
					    }
					    &.klf{
					        color: #fa3534;
					        border: 1px solid #fa3534;
					        background-color: #fcedeb;
					    }
					}
				} 
            }
        }
        .num{
            width: 100%;
			// margin: 10px auto;
			padding-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text{
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
    .qr{
        width: 80%;
        margin-left: 10%;
        position: fixed;
		left: 0;
        bottom: 0;
		padding-bottom: 10px;
        .u-button{
            color: white;
            background-color: #fa3534;
        }
    }
}
</style>